<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./jquery-2.1.4/jquery.js"></script>>
    <title>Title</title>
    <script>
        $(document).ready(function () {

        })
        $(function () {

        })
            </script>
</head>
<body>
<!--JQuery简称JQ 。地位非常高，在前端中的地方相当于java中的spring框架，作用也类似。
jq是js函数库。简化了js的大量操作，比如DOM $('元素id')==js中的document.getElemetnByID()
jq是为了跨浏览器（ie，firefox，chrome，safari内核）和浏览器版本。（IE6-/6+/10+/11+/EDGE）
-->
<input id="txt1" name="text1" type="text" value="我是测试文本">
<br>
<input type="button" id="btn1" value="点我" onclick="clickme()">
<br>
<input type="button" id="btn2" value="操作div" onclick="=clickme2()">
<div id="div1" style="background-color: aqua；width: 200px;height: 100px"></div>
<div id="div2" style="background-color: #dd11ff;width: 200px;height: 100px"></div>
<!--  //  jq通过选取html元素，并对元素进行操作
//基础语法：  $(selector).action()  selector通过特点属性来找元素
// 在函数中，可以使用this关键字来表示元素
//$(this).hide()  当前元素隐藏
//$("p").hide()  隐藏所有的段落内容 $("元素类型")==document.getElemetnsByTagName()
//$("p .test").hide()  隐藏所有的class=test的段落
//$("#test").hide()  隐藏所有的id=test的元素
//选择器语法 . # -> Xpath

//html准备就绪方法（打开网页之前的一瞬间）
//小括号里面一般跟着参数列表。jq的小括号里可以跟方法体（lamba表达式 兰布达）
//事件->你的操作对应的网页元素的方法
//常见的事件：单击(按钮onclick)click,双击dblclick,获取焦点onfoucs，失去焦点onblur-->
function clickme() {
//        $("#txt1").dblclick();//在普通的js中也可以使用jquery语法，只要使用$ 标准jq语法
//        alert("我被点了");
//        $("#txt1").toggle(); //显示与隐藏的开关方法
//                $("#div1").fadeIn();
//        $("#div1").fadeIn("slow");
//        $("#div1").fadeIn(3000);
console.log($("#txt1").value) ;
$("#div1").hide("slow",function () { //事件里写一个functions，事件完成之后会调用。那这个func称之为callback。
//            alert("我没有死，只是消失了");

});
}
function clickme1() {

//        $("#div1").fadeIn();
//        $("#div1").fadeIn("slow");
//        $("#div1").fadeIn(3000);
//        $("#div1").fadeOut();
//        $("#div1").fadeOut("fast");
$("#div1").fadeOut(1000);
}

function clickme2() {

//        $("#div1").fadeIn();
//        $("#div1").fadeIn("slow");
//        $("#div1").fadeIn(3000);
//        $("#div1").fadeOut();
//        $("#div1").fadeOut("fast");
//        $("#div1").slideDown("fast");
$("#div2").slideUp("slow");
}

$("#txt1").dblclick(function () {//找到id=txt1的元素，对它的双击事件进行定义。
$(this).hide(); //this表示元素本身
})
$("#txt1").mouseenter(function () {//鼠标指针穿过元素的事件。
//        $(this).hide(); //this表示元素本身
console.log("你楸啥")
})
$("#txt1").mouseleave(function () {//鼠标指针离开元素的事件（必须先穿过才能处罚）。
console.log("楸你咋的");
})
$("#txt1").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
console.log("啪！");
})
$("#txt1").focus(function () {//获取焦点。
console.log("楸你咋的!!!!!");
})
$("#txt1").blur(function () {//失去焦点。（其他地方获取了焦点）
console.log("我滚了!!!!!");
if(this.value.length>=4){
$(this).css("color","#fff1a2");
console.log( $(this).html());
}
})

</script>
<script>
//    alert("我将带头冲锋！");
$(function () {
//    $("#btn1").click();

})
</body>
</html>